<template>
  <div>
    <form action="/">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
      />
    </form>
    <van-dropdown-menu>
      <van-dropdown-item v-model="value1" :options="option1" />
      <van-dropdown-item v-model="value2" :options="option2" />
      <van-dropdown-item v-model="value3" :options="option3" />
      <van-dropdown-item v-model="value4" :options="option4" />
    </van-dropdown-menu>

    <ul class="sheet">
        <li v-for="item in goods" :key="item.id" @click="goDetail(item.id)">
            <img :src=item.picture alt="">
            <p>{{item.shop}}</p>
            <span>${{item.price}}8</span>
        </li>
       
    </ul>
  </div>
</template>

<script>
import Vue from "vue";
import { Search } from "vant";
import {requestSearch} from '../../api/detail'
Vue.use(Search);
import { DropdownMenu, DropdownItem } from "vant";
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
export default {
  data: function() {
    return {
      goods:[],
      value: "",
      value1: 0,
      value2: "a",
      value3: "11",
      value4: "aa",
      option1: [
        { text: "综合", value: 0 },
        { text: "信用优先", value: 1 },
        { text: "销量优先", value: 2 }
      ],
      option2: [
        { text: "销量", value: "a" },
        { text: "升序", value: "b" },
        { text: "降序", value: "c" }
      ],
      option3: [
        { text: "新品", value: "11" },
        { text: "旧品", value: "22" },
        { text: "最新", value: "33" }
      ],
      option4: [
        { text: "价格", value: "aa" },
        { text: "价格降序", value: "bb" },
        { text: "价格升序", value: "cc" }
      ]
    };
  },
  methods: {
    onCancel: function() {
      this.value = "";
      this.$router.go(-1)
    },
    onSearch:function(val){
         this.getResult(val)
    },
    async getResult(val){
      let res =await requestSearch(val)
      let data = res.data
      let {resultCode,resultInfo} = data
    if(resultCode==1){
        // this.$store.dispatch('SETGOODS',resultInfo.list)
        localStorage.setItem('goods',JSON.stringify(resultInfo.list||[]))
        this.goods=JSON.parse(localStorage.getItem('goods'))
        console.log(this.goods);
      
    }
    },
    goDetail:function(id){
      // console.log(id);
     this.$router.push({path:`/detail/${id}`})
    }
  },
  created () {
   console.log(this.$route);
    // if(this.$route.query=''){
    //   return
    // }
    this.getResult(this.$route.query)
  },
  beforeMount () {
    this.goods=JSON.parse(localStorage.getItem('goods'))
      
  }
};
</script>

<style lang="scss" scoped>
.sheet{
    display: flex;
    justify-content: left;
    flex-wrap:wrap;
    width: 100%;
    padding: 1rem;
    li{
        width: 43%;
        height: 15rem;
        text-align: left;
        margin-left: 1rem;
        img{
            width: 100%;
            height: 10rem;
        }
        p{
            font-size: 1.125rem;
            margin: 0.625rem 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        span{
            font-size: 1rem;
            color: red;
        }
    }
}

</style>